<template>
  <div class="button">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="任务详情" name="first">
        <el-form :model="form" label-width="120px" :rules="rule1" class="form">
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="需求描述：" prop="name">
                <el-input v-model="form.name" width="220px" style="width: 220px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="应用场景：" prop="type">
                <el-select v-model="form.type" placeholder="请选择">
                  <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="版本：">
                <el-input v-model="form.host" width="220px" style="width: 220px;" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="优先级：" prop="order">
                <el-select v-model="form.order" placeholder="请选择">
                  <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="需求详情">
            <el-input type="textarea" :rows="10" maxlength="200" show-word-limit placeholder="请输入内容"
              v-model="form.info">
            </el-input>
          </el-form-item>
        </el-form>
        <div class="footer">
          <el-button>取消</el-button>

          <el-button type="primary">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="任务分解" name="second">
        <el-button @click="isShow=true" type="primary">生成任务树</el-button>
        <el-table :data="tableData" style="width: 100%;" row-key="id" border default-expand-all
        :header-cell-style="{ fontSize: '18px', backgroundColor: '#D4E8FD', color: '#333' }" 
        class="table"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column prop="name" label="作战任务" width="380">
          </el-table-column>
          <el-table-column prop="info" label="任务描述" width="780">
          </el-table-column>
          <el-table-column label="操作"  width="380">
            <template #default="scope">
              <a href="javascript:" style="margin-right: 20px;">添加子任务</a>
              <a href="javascript:" style="margin-right: 20px;color: red;" v-if="scope.row.id != 1">删除当前任务</a>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>

  <el-dialog title="任务分解树" v-model="isShow" width="1000px" :append-to-body="true" class="data-dialog" :modal="true">
     <img src="../assets/1.jpg" width="100%" style="height: 500px;">
    </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      isShow:false,
      form: { name: "登岛作战", type: "火力打击", host: "v1.0", order: "P0", info: "" },
      rule1: {
        name: [{ required: true, message: '需求描述不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '应用场景不能为空', trigger: 'blur' }],
        order: [{ required: true, message: '优先级不能为空', trigger: 'blur' }],
      },
      options1: [
        {
          label: "火力打击",
          value: "火力打击"
        }
      ],
      options2: [
        {
          label: "P0",
          value: "P0"
        }
      ],
      tableData: [{
        id: 1,
        name: "登岛计划",
        info: "任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述",
        children: [{
          id: 11,
          name: "占领机场",
          info: "任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述",
          children: [{
            id: 111,
            name: "占领北滩",
            info: "任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述",
            children: [{
              id: 1111,
              name: "北区防御",
              info: "任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述",
            },
            {
              id: 1112,
              name: "抢滩登陆北滩",
              info: "任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述",
            },
            {
              id: 1113,
              name: "清除北区冰雪",
              info: "任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述",
            }, {
              id: 1114,
              name: "北滩火力支援",
              info: "任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述",
            },
            ]
          },
          ]
        }, {
          id: 112,
          name: "北路行进",
          info: "任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述",
        }, {
          id: 113,
          name: "抢占机场",
          info: "任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述",
        },
        ]
      },
      {
        id: 2,
        name: "争夺港口",
        info: "任务描述任务描述任务描述任务描述任务描述任务描述任务描述任务描述"
      }]
    }
  },
  methods: {


  }
}
</script>

<style lang="less" scoped>
@import url("../font/detail.less");
</style>